<template>
    <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="size"
        layout="total, prev, pager, next, jumper" :total="total">
    </el-pagination>
</template>
<script>
export default {
    components: {},
    props: {
        page: {
            type: Number,
            default: 1
        },
        size: {
            type: Number,
            default: 10
        },
        total: {
            type: Number,
            default: 10
        },
    },
    data() {
        return {}
    },
    watch: {
        total(v) {
            if (this.page > Math.ceil(v / this.size)) {
                let page = this.page <= 1 ? 1 : this.page - 1
                this.handleCurrentChange(Math.ceil(page))
            }
        }
    },
    
    methods: {
        handleCurrentChange(page) {
            this.$emit('current-change', page)
        }
    },

    mounted() { },

};
</script>